<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
    <link rel="icon" href="../../favicon.ico" type="image/x-icon">

    <link href="../../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="../../metro/css/schemes/red-alert.css" rel="stylesheet">

    <title>Cube demo - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        #disk-info, #ram-info, #cpu-info {
            display: block;
            position: absolute;
            font-size: 32px;
            color: #c4122f;
            width: 200px;
            white-space: nowrap;
        }

        #disk-info {
            text-align: right;
            top: 54px;
            left: 50%;
            transform: translateX(-370px);
        }

        #cpu-info {
            text-align: left;
            top: 54px;
            left: 50%;
            transform: translateX(180px);
        }

        #ram-info {
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            text-align: center;
        }
    </style>

    <script>
        var rules = [
            {on: {'top': [16],      'left': [4],         'right': [1]}},
            {on: {'top': [12, 15],  'left': [3, 8],      'right': [2, 5]}},
            {on: {'top': [11],      'left': [7],         'right': [6]}},
            {on: {'top': [8, 14],   'left': [2, 12],     'right': [9, 3]}},
            {on: {'top': [10, 7],   'left': [6, 11],     'right': [10, 7]}},
            {on: {'top': [13, 4],   'left': [1, 16],     'right': [13, 4]}},
            {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}},
            {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}}
        ];

        var information = [
            {disk: "4 Gb", ram: "256 Mb", cpu: "0,25 GHz"},
            {disk: "8 Gb", ram: "512 Mb", cpu: "0,5 GHz"},
            {disk: "16 Gb", ram: "1024 Mb", cpu: "1,0 GHz"},
            {disk: "32 Gb", ram: "2048 Mb", cpu: "2,0 GHz"},
            {disk: "64 Gb", ram: "4096 Mb", cpu: "4,0 GHz"},
            {disk: "128 Gb", ram: "8192 Mb", cpu: "8,0 GHz"},
            {disk: "256 Gb", ram: "16384 Mb", cpu: "16,0 GHz"},
            {disk: "512 Gb", ram: "32768 Mb", cpu: "32,0 GHz"}
        ];

        function cubeTick(index, element){
            var info = information[index];
            var target = ['disk', 'ram', 'cpu'];

            $.each(target, function(){
                $("#"+this+"-info").html(info[this]);
            });
        }

    </script>
</head>
<body class="bg-dark fg-white">
    <div class="container">
        <h1 class='text-center'>Metro 4 Components Library</h1>
        <h4 class='text-center'>Cube component demo</h4>

        <div class="d-flex flex-justify-center flex-align-center mt-6">
            <input data-role="switch" checked data-caption="Show Axis" onclick="$('#demo-cube').attr('data-show-axis', $(this).is(':checked'))">

            <span class="ml-4 mr-4">Axis type: </span>

            <input data-role="radio" name="r1" value="arrow" checked data-caption="Arrow" onclick="$('#demo-cube').attr('data-axis-style', this.value)">
            <input data-role="radio" name="r1" value="line" data-caption="Line" onclick="$('#demo-cube').attr('data-axis-style', this.value)">
            <input data-role="radio" name="r1" value="no-style" data-caption="No style" onclick="$('#demo-cube').attr('data-axis-style', this.value)">
        </div>

        <div class="p-4 pos-relative">
            <div id="demo-cube" data-role="cube" data-rules="rules" data-on-tick="cubeTick" data-show-axis="true" data-axis-style="arrow"></div>
            <div id="disk-info"></div>
            <div id="ram-info"></div>
            <div id="cpu-info"></div>
        </div>
    </div>

    <script src="../../metro/js/metro.js"></script>
    <!-- ads-script -->
    <script>
        var flashRules = [
            {on: {'top': [16],      'left': [4],         'right': [1]}},
            {on: {'top': [12, 15],  'left': [3, 8],      'right': [2, 5]}},
            {on: {'top': [11],      'left': [7],         'right': [6]}},
            {on: {'top': [8, 14],   'left': [2, 12],     'right': [9, 3]}},
            {on: {'top': [10, 7],   'left': [6, 11],     'right': [10, 7]}},
            {on: {'top': [13, 4],   'left': [1, 16],     'right': [13, 4]}},
            {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}},
            {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}}
        ];

        var flashRules2 = [
            {on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]}},
            {on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]}},
            {on: {'top': [13, 4],   'left': [1, 16],     'right': [13, 4]}},
            {on: {'top': [10, 7],   'left': [6, 11],     'right': [10, 7]}},
            {on: {'top': [8, 14],   'left': [2, 12],     'right': [9, 3]}},
            {on: {'top': [11],      'left': [7],         'right': [6]}},
            {on: {'top': [12, 15],  'left': [3, 8],      'right': [2, 5]}},
            {on: {'top': [16],      'left': [4],         'right': [1]}}
        ];

        var flashRules3 = [
            {on: {'top': [16],      'left': [4],         'right': [1]}},
            {on: {'top': [15, 12],  'left': [3, 8],      'right': [5, 2]}},
            {on: {'top': [14, 8],  'left': [2, 12],      'right': [9, 3]}},
            {on: {'top': [13, 4],  'left': [1, 16],      'right': [13, 4]}},
            {on: {'top': [1],  'left': [13],      'right': [16]}},
            {on: {'top': [6],  'left': [10],      'right': [11]}},
            {on: {'top': [11],  'left': [7],      'right': [6]}},
            {on: {'top': [10,7],  'left': [6,11],      'right': [10,7]}},
            {on: {'top': [9,3],  'left': [5,15],      'right': [14,8]}},
            {on: {'top': [5,2],  'left': [9,14],      'right': [15,12]}}
        ];

        var flashRules4 = [
            {
                on: {'top': [16],      'left': [4],         'right': [1]},//1
                off: {'top': [13, 4],   'left': [1, 16],     'right': [13, 4]}, //6
            },
            {
                on: {'top': [12, 15],  'left': [3, 8],      'right': [2, 5]},//2
                off: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]},//7
            },
            {
                on: {'top': [11],      'left': [7],         'right': [6]},//3
                off: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]},//8
            },
            {
                on: {'top': [8, 14],   'left': [2, 12],     'right': [9, 3]},//4
                off: {'top': [16],      'left': [4],         'right': [1]}, //1
            },
            {
                on: {'top': [10, 7],   'left': [6, 11],     'right': [10, 7]},//5
                off: {'top': [12, 15],  'left': [3, 8],      'right': [2, 5]}, //2
            },
            {
                on: {'top': [13, 4],   'left': [1, 16],     'right': [13, 4]},//6
                off: {'top': [11],      'left': [7],         'right': [6]}, //3
            },
            {
                on: {'top': [9, 6, 3], 'left': [5, 10, 15], 'right': [14, 11, 8]},//7
                off: {'top': [8, 14],   'left': [2, 12],     'right': [9, 3]}, //4
            },
            {
                on: {'top': [1, 2, 5], 'left': [9, 13, 14], 'right': [15, 12, 16]},//8
                off: {'top': [10, 7],   'left': [6, 11],     'right': [10, 7]}, //5
            }
        ];
    </script>
</body>
</html>